<template>
    <div class="auth-success-box">
        <div class="success-content">
            <el-result icon="success" :title="$t('authSuccess.title')" :sub-title="$t('authSuccess.message')">
                <template #extra>
                    <el-button color="#F16C2E" size="large" @click="goToHome">
                        {{ $t('authSuccess.backToHome') }}
                    </el-button>
                </template>
            </el-result>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'

const router = useRouter()

// 返回首页
const goToHome = () => {
    router.push('/console/')
}
</script>

<style lang="less" scoped>
@import '@/assets/styles/variable.less';

.auth-success-box {
    padding: 3vh 0;
    width: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .success-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;

        :deep(.el-result) {
            padding: 40px 20px;

            .el-result__icon {
                margin-bottom: 20px;
            }

            .el-result__title {
                margin-top: 20px;
                margin-bottom: 16px;
                font-size: 24px;
                font-weight: 500;
                color: #303133;
            }

            .el-result__subtitle {
                margin-bottom: 30px;
                font-size: 14px;
                color: #606266;
                line-height: 1.6;
            }

            .el-result__extra {
                margin-top: 20px;
            }
        }
    }
}
</style>
